﻿import "../jquery/jquery.min.js";

function getRemainingHeight(elem) {
    let parent = elem.parentElement;
    let parentHeight = parent.offsetHeight;
    let childrenHeight = 0;
    for (let child of parent.children) {
        if (elem != child)
            childrenHeight += $(child).outerHeight(true);
    }
    let elemq = $(elem);
    let marginHeight = parseInt(elemq.css("margin-top"))
        + parseInt(elemq.css("margin-bottom"));
    let paddingHeight = parseInt(elemq.css("padding-top"))
        + parseInt(elemq.css("padding-bottom"));
    let resultHeight = parentHeight - childrenHeight - marginHeight - paddingHeight;
    return resultHeight;    
}

(function regFillRemainingHeight() {
    let funcResize = function (entries) {
        //console.log('a');
        //console.log(entries[0]);
        for (let entry of entries) {
            //console.log('b');
            //console.log(entry);
            let root = entry.target;
            //the css has to be set to an arbitrary small initialized value to prevent parent dimension over-estimating.
            //see sizing.css.
            let elems = root.getElementsByClassName("sizing-fill-remaining-h");
            for (let elem of elems) 
                elem.style.height = getRemainingHeight(elem) + "px";
        }
    };
    let mutationObserver = new MutationObserver(funcResize);
    const config = { attributes: true, childList: true, subtree: true };
    mutationObserver.observe(document, config);
    //console.log('ccc');
})();

(function regAppFillRemainingHeight() {
    let appGapWidth=getComputedStyle(document.documentElement)
        .getPropertyValue('--app-gap-width');
    //console.log(appGapWidth);
    let funcResize = function (entries) {
        if (window.innerWidth < appGapWidth)
            return;
        //console.log(window.innerWidth);
        //console.log(entries[0]);
        for (let entry of entries) {
            //console.log('b');
            //console.log(entry);
            let root = entry.target;
            //the css has to be set to an arbitrary small initialized value to prevent parent dimension over-estimating.
            //see sizing.css.
            let elems = root.getElementsByClassName("sizing-fill-remaining-h-app");
            for (let elem of elems)
                elem.style.height = getRemainingHeight(elem) + "px";
        }
    };
    let mutationObserver = new MutationObserver(funcResize);
    const config = { attributes: true, childList: true, subtree: true };
    mutationObserver.observe(document, config);
    //console.log('ccc');
})();

(function regFillRemainingHeightToMaxHeight() {
    let funcResize = function (entries) {
        //console.log('a');
        //console.log(entries[0]);
        for (let entry of entries) {
            //console.log('b');
            //console.log(entry);
            let root = entry.target;
            //the css has to be set to an arbitrary small initialized value to prevent parent dimension over-estimating.
            //see sizing.css.
            let elems = root.getElementsByClassName("sizing-fill-remaining-mh");
            for (let elem of elems)
                elem.style.maxHeight = getRemainingHeight(elem) + "px";
        }
    };
    let mutationObserver = new MutationObserver(funcResize);
    const config = { attributes: true, childList: true, subtree: true };
    mutationObserver.observe(document, config);
    //console.log('ccc');
})();

